<template>
  <div class="dashboard-container">
    <div class="figures-and-chart-row">
      <div class="figures-column">
        <figure-cards :list="list1" dir="vertical"></figure-cards>
      </div>
      <div class="overview-charts">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="地图分布视图" name="first">
            <div class="overview-chart">
              <map-with-table></map-with-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="得分分布视图" name="second">
            <div class="overview-chart">
              <map-with-table></map-with-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div>
      外部监管情况
      <figure-cards :list="list1" dir="horizontal"></figure-cards>
    </div>
    <div class="issue-charts">
      <div class="issue-bar-chart">
        <branches-issues-chart width="500px" height="200px"></branches-issues-chart>
      </div>
      <div class="issue-pie-chart">
        <issue-categories-chart ring="true" width="400px" height="200px"></issue-categories-chart>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MapChart from '../components/map/MapChart.vue'
import BranchRankTable from '../components/table/BranchRankTable.vue'
import FigureCards from '../components/figure/FigureCards.vue'
import { Figure, RankedBranch } from '@/api-scp/types'
import { getBranchIssues, getOverviewFigures1 } from '@/api-scp/dashboard'
import MapWithTable from './MapWithTable.vue'
import BranchesIssuesChart from '../components/bar-line/BranchesIssuesChart.vue'
import IssueCategoriesChart from '../components/pie/IssueCategoriesChart.vue'

@Component({
  name: 'BranchView',
  components: {
    FigureCards,
    MapChart,
    BranchRankTable,
    MapWithTable,
    BranchesIssuesChart,
    IssueCategoriesChart
  }
})
export default class extends Vue {
  private list1: Figure[] = []
  private activeTab = 'first'

  created() {
    this.getList()
  }

  private async getList() {
    this.list1 = await getOverviewFigures1()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;
  width: 900px;

  .figures-and-chart-row {
    height: 600px;
    display: flex;

    .figures-column {
      width: 140px;
    }

    .overview-charts {

      .overview-chart {
        width: 100%;
      }
    }
  }

  .issue-charts {
    display: flex;
    justify-content: center;
    align-items: center;

    .issue-bar-chart {
      flex-grow: 2;
    }

    .issue-pie-chart {
      flex-grow: 1;
    }
  }
}

</style>
